<template>
    <HeaderBar :title="$t('activities.title')"  />
    <view class="activities-container main-container">
        <view class="banner">
            <image mode="widthFix" class="bg" src="@/static/icon/activities_banner.png" />
        </view>
        <view class="title">
            <view class="item">{{$t('activities.newcomer')}}</view>
            <view class="item">{{$t('activities.support')}}</view>
            <view class="item">{{$t('activities.display')}}</view>
            <view class="item">{{$t('activities.coupons')}}</view>
        </view>
        <view :class="['received-btns form-btns', isReceived&&'grey']" @click="onReceived">{{$t('activities.received')}}</view>
        <view class="rules">
            <view class="name">{{$t('activities.activityRules')}}</view>
            <view class="content">
                <view class="item">{{$t('activities.rules1')}}</view>
                <view class="item">
                   {{$t('activities.rules2')}}
                </view>
                <view class="item">
                    {{$t('activities.rules3')}}
                </view>
                <view class="item">{{$t('activities.rules4')}}</view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import HeaderBar from '@/components/HeaderBar';
import { showToast, NavigateTo, getStorage } from '@/utils/common';
import { addCoupon } from '@/api/coupons';

const isReceived = ref<boolean>(false);

onLoad(() => {
    getLoad();
});

//初始化加载
const getLoad = async () => {
    const user = await getStorage('user') ||{};
    isReceived.value = user.couponState;
};

//用户领卷
const onReceived = async () => { 
     if (isReceived.value) {
        return;
    }
    const res = await addCoupon();
    if (res.code !== 200) {
        return;
    }
    isReceived.value = true;
    showToast({ title: 'Received Success' });
};
</script>

<style lang="scss">
.activities-container {
    padding: 60rpx 0 0;
    .banner {
        image {
            width: 100%;
        }
    }
    .title {
        text-align: center;
        margin-top: 60rpx;
        .item {
            margin-top: 20rpx;
            font-size: 45rpx;
            color: #000;
            font-weight: 600;
        }
    }
    .received-btns {
        margin: 80rpx 30rpx 0;
        background: linear-gradient(135deg, #1989fa, #39b9f9);
        box-shadow: 0 1.06667vw 3.2vw #1989fa33;
    }
    .grey {
        background: #e4e6eb;
        box-shadow: none;
        color: #bcc0c4;
    }
    .rules {
        border-top: solid 14rpx #f0f2f5;
        margin-top: 30rpx;
        padding: 0 36rpx 60rpx;
        .name {
            font-size: 34rpx;
            padding: 60rpx 0 40rpx;
        }
        .content {
            .item {
                font-size: 28rpx;
                margin-bottom: 20rpx;
                color: #65676a;
                list-style-type: disc;
                padding: 0 0 0 26rpx;
                position: relative;
                line-height: 46rpx;
                &::after {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 18rpx;
                    width: 8rpx;
                    height: 8rpx;
                    background: #65676a;
                    border-radius: 100%;
                }
            }
        }
    }
}
</style>
